<template>
  <van-nav-bar left-text="取消" left-arrow @click-left="$router.back()" />
  <div class="box">
    <h2 style="line-height: 4rem">输入验证码</h2>
    <p style="color: #666; font-size: 0.9rem">验证码已发送至(+86){{ phone }}</p>
    <!-- 短信输入框 focus聚焦时触发 -->
    <div @click="showKeyboard = true" style="margin-top: 1rem">
      <van-password-input
        :info="info"
        length="4"
        :focused="showKeyboard"
        :value="value"
        @focus="ShowPhone"
      />
    </div>

    <!-- 数字键盘 -->
    <van-number-keyboard v-model="value" :show="showKeyboard" @blur="showKeyboard = false" />
    <div style="line-height: 3rem">
      <div v-if="flag" style="font-size: 0.8rem">{{ time }}s 后可重新获取验证码</div>
      <div v-else style="color: #3dc18c" @click="countDown">重新获取验证码</div>
    </div>
  </div>
        <van-nav-bar left-text="取消" left-arrow @click-left="$router.back()" />
        <div class="box">
            <h2 style="line-height: 4rem">输入验证码</h2>
            <p style="color: #666; font-size: 0.9rem">验证码已发送至(+86){{ phone }}</p>
            <h2 style="line-height: 4rem;">输入验证码</h2>
            <p style="color: #666;font-size: .9rem;">验证码已发送至(+86){{ phone }}</p>
            <!-- 短信输入框 focus聚焦时触发 -->
            <div @click="showKeyboard = true" style="margin-top: 1rem">
                <van-password-input :info="info" length="4" :focused="showKeyboard" :value="value" @focus="ShowPhone" />
            </div>

            <!-- 数字键盘 -->
            <van-number-keyboard v-model="value" :show="showKeyboard" @blur="showKeyboard = false" />
            <div style="line-height:3rem;">
                <div v-if="flag" style="font-size: .8rem;">
                    {{ time }}s 后可重新获取验证码
                </div>
                <div v-else style="color: #3dc18c;" @click="countDown">
                    重新获取验证码
                </div>
            </div>
  <div>
    <van-nav-bar left-text="取消" left-arrow @click-left="$router.back()" />
    <div class="box">
      <h2 style="line-height: 4rem">输入验证码</h2>
      <p style="color: #666; font-size: 0.9rem">验证码已发送至(+86){{ phone }}</p>
      <!-- 短信输入框 focus聚焦时触发 -->
      <div @click="showKeyboard = true" style="margin-top: 1rem">
        <van-password-input :info="info" length="4" :focused="showKeyboard" :value="value" @focus="ShowPhone" />
      </div>

      <!-- 数字键盘 -->
      <van-number-keyboard v-model="value" :show="showKeyboard" @blur="showKeyboard = false" />

      <div style="line-height:3rem;">
        <div v-if="flag" style="font-size: .8rem;">
          {{ time }}s 后可重新获取验证码
        </div>
        <div v-else style="color: #3dc18c;" @click="countDown">
          重新获取验证码
        </div>
      </div>


    </div>
  </div>
</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'

var info = ref('请输入短信验证码')
const router = useRouter();
const route = useRoute()
const phone = ref(route.query.phone)
const value = ref('');
const showKeyboard = ref(true)


const time = ref(60)
var flag = ref(true)

const countDown = () => {
  flag.value = true
  flag.value = true;
  var timer = setInterval(() => {
    time.value--
    if (time.value == 0) {
      clearInterval(timer)
      time.value = 60
      flag.value = false
    }
  }, 1000)
}
countDown()

function generateVerificationCode() {
  return Math.floor(Math.random() * 9000 + 1000).toString()
}





const ShowPhone = async () => {
  if (value.value.length == 4) {
    if (value.value == code) {
      info.value = "验证码正确"
      var data = {
        username: "" + phone.value,
        password: '123456',
        nickname: "小于",
        avatar: "https://img0.baidu.com/it/u=3487158143,375532626&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
        phone: phone.value,
      }
      var res = await axios.post('/api/register', data)
      //登录
      var data = {
        username: '' + phone.value,
        username: "" + phone.value,
        password: '123456',
        phone: phone.value,
      }
      var resp = await axios.post('/api/login', data)
      console.log(resp.data.data)
      if (res.data.code == 200) {
        info.value = '注册成功'
      console.log(resp.data.data.userInfo);
      if (res.data.code == 200) {
        info.value = "注册成功"
        localStorage.setItem('token', resp.data.data.accessToken)
        localStorage.setItem('userInfo', JSON.stringify(resp.data.data.userInfo))
        alert('注册成功')
      }
      if (res.data.code == 400) {
        info.value = '该手机号已被注册'
        localStorage.setItem('token', resp.data.data.accessToken)
        localStorage.setItem('userInfo', JSON.stringify(resp.data.data.userInfo))
        alert('登录成功')
      }
      router.push('/home')
    } else {
      info.value = '验证码错误'
      return
    }
  } else {
    info.value = '格式错误'
    return
  }
}
}
const code = generateVerificationCode()
console.log(code)
</script>
<style scoped>
.box {
  width: 100%;
  height: 100vh;
  padding: 2rem;
}
</style>
